@import '/variable.less';

@home-tab-item-height: 96rpx;

/* ==========================================================================\n   主容器样式\n   ========================================================================== */
.home-container {
  /* 基础布局设置 */
  height: calc(100vh - @tab-bar-height);
  background-color: @bg-color;


  .home-content {
    height: calc(100% - @nav-bar-height);
    background-color: @bg-color;
  }


  .t-tabs {
    /* 基础样式变量覆盖 */
    --td-tab-item-tag-height: @home-tab-item-height !important; // 效果：设置标签项高度为自定义变量值
    --td-tab-font-size: 20px !important; // 效果：设置标签字体大小为20px
    --td-text-color-primary: #000000 !important; // 效果：设置主要文字颜色为纯黑色
    --td-text-color-secondary: @text-secondary !important; // 效果：设置次要文字颜色为主题变量
    --td-bg-color: #ffffff !important; // 效果：设置背景色为主题变量
    --td-border-color: @gray3 !important; // 效果：设置边框颜色为浅灰色
    --td-primary-color: @primary-green !important; // 效果：设置主题色为绿色
    
    /* 布局与定位 */
    width: 100% !important; // 效果：设置宽度占满父容器
    height: 100% !important; // 效果：设置高度占满父容器
    position: relative !important; // 效果：建立相对定位上下文
    background-color: @bg-color !important; // 效果：设置背景色（与变量重复但增强优先级）
    color: @text-primary !important; // 效果：设置文字颜色
    z-index: 10 !important; // 效果：确保标签栏在其他元素上方
    
    /* ==========================================================================\n       底部边框效果 - 渐变设计\n       ========================================================================== */
    // 保留渐变边框效果，移除重复的灰色边框
    &::after {
      content: '' !important; // 效果：创建伪元素
      position: absolute !important; // 效果：绝对定位
      bottom: 0 !important; // 效果：定位到底部
      left: 0 !important; // 效果：定位到左侧
      right: 0 !important; // 效果：定位到右侧
      height: 1rpx !important; // 效果：设置边框高度
      background: linear-gradient(90deg, transparent, #eeff05, transparent) !important; // 效果：创建左右透明中间黄色的渐变边框
      opacity: 0.6 !important; // 效果：降低透明度增加柔和感
      z-index: 11 !important; // 效果：确保边框在标签栏内容上方
      pointer-events: none !important; // 效果：边框不响应鼠标事件
    }

    /* ==========================================================================\n       标签内容区域样式\n       ========================================================================== */
    &__content {
      height: calc(100% - @home-tab-item-height) !important; // 效果：计算内容区域高度（总高度减去标签栏高度）
      overflow: auto !important; // 效果：允许内容溢出时滚动
      background-color: @bg-color !important; // 效果：设置内容区域背景色
    }
    
    /* ==========================================================================\n       标签导航区域样式\n       ========================================================================== */
    &__nav {
      background-color: @bg-color !important; // 效果：设置导航区域背景色
    }
    
    /* ==========================================================================\n       标签项样式 - 选中与未选中状态\n       ========================================================================== */
    .t-tabs__nav-item {
      position: relative !important; // 效果：为选中状态的下划线建立定位基准
      transition: all 0.15s ease !important; // 效果：设置颜色变化过渡动画
      color: #050505 !important; // 效果：未选中状态文字为接近黑色
      font-weight: 700 !important; // 效果：强制加粗字体
      
      /* 选中状态样式 */
      &.t-is-active {
        color: @primary-green !important; // 效果：选中状态文字为主题绿色
        
        // 添加文字辉光效果
        text-shadow: 0 0 12rpx rgba(79, 224, 181, 0.9) !important; // 效果：文字周围产生绿色辉光
        
        // 选中状态下划线效果
        &::after {
          content: '' !important; // 效果：创建下划线伪元素
          position: absolute !important; // 效果：绝对定位
          bottom: 0 !important; // 效果：定位到底部
          left: 25% !important; // 效果：下划线左右各留25%空白，宽度为50%
          right: 25% !important;
          height: 4rpx !important; // 效果：下划线高度
          background: @primary-green !important; // 效果：下划线颜色
          border-radius: 2rpx !important; // 效果：下划线圆角
          box-shadow: 0 0 12rpx rgba(79, 224, 181, 0.9) !important; // 效果：下划线辉光效果
          z-index: 2 !important; // 效果：确保下划线在其他元素上方
        }
      }
    }
    
    /* ==========================================================================\n       活动指示器样式 - 辉光效果\n       ========================================================================== */
    .t-tabs__track {
      background: @primary-green !important; // 效果：指示器背景色
      width: 25%;
      height: 5rpx !important; // 效果：指示器高度
      border-radius: 5rpx !important; // 效果：指示器圆角
      box-shadow: 0 0 12rpx rgba(79, 224, 181, 0.9) !important; // 效果：指示器辉光效果
      transition: all 0.15s ease !important; // 效果：指示器移动过渡动画
      z-index: 12 !important; // 效果：确保指示器在最上层
    }
  }

  /* ==========================================================================\n     筛选标签样式 - 高级感设计\n     ========================================================================== */
  

  
  .home-card-list {
    /* 布局设置 */
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20rpx;
    padding: 20rpx 24rpx 120rpx;
    background-color: @bg-color;
  }
}


